<script setup lang="tsx">
import { PropType, ref, onMounted } from 'vue'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { Icon } from '@/components/Icon'
import { ElTag } from 'element-plus'
import { sysResourceGetById } from '@/api/backstage'

const props = defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => undefined
  }
})
const detailInfo = ref({})
onMounted(() => {
  if (props.currentRow) {
    sysResourceGetById({ id: props.currentRow.id }).then((res) => {
      detailInfo.value = res.data
    })
  }
})
const renderTag = (enable?: boolean) => {
  return <ElTag type={!enable ? 'danger' : 'success'}>{enable ? '启用' : '禁用'}</ElTag>
}

const detailSchema = ref<DescriptionsSchema[]>([
  {
    field: 'type',
    label: '菜单类型',
    span: 12,
    slots: {
      default: (data) => {
        const type = data.type
        return <>{['目录', '菜单', '按钮链接'][type]}</>
      }
    }
  },
  {
    field: 'parentName',
    label: '父级菜单'
  },
  {
    field: 'name',
    label: '资源名称'
  },
  {
    field: 'routePath',
    label: '组件路径'
  },
  {
    field: 'alias',
    label: '资源别名'
  },
  {
    field: 'menuPosition',
    label: '菜单位置',
    span: 12,
    slots: {
      default: (data) => {
        const value = data.menuPosition
        return <>{['左侧菜单', '顶部菜单', '其他位置'][value]}</>
      }
    }
  },
  {
    field: 'icon',
    label: '图标',
    slots: {
      default: (data) => {
        const icon = data.icon
        if (icon) {
          return (
            <>
              <Icon icon={icon} />
            </>
          )
        } else {
          return null
        }
      }
    }
  },
  {
    field: 'status',
    label: '状态',
    slots: {
      default: (data) => {
        const value = data.status
        return <>{['正常', '停用'][value]}</>
      }
    }
  },
  {
    field: 'show',
    label: '是否显示',
    slots: {
      default: (data) => {
        const value = data.show
        return <>{['显示', '隐藏'][value]}</>
      }
    }
  },
  // {
  //   field: 'permissionList',
  //   label: '按钮权限',
  //   span: 24,
  //   slots: {
  //     default: (data: any) => (
  //       <>
  //         {data?.permissionList?.map((v) => {
  //           return (
  //             <ElTag class="mr-1" key={v.value}>
  //               {v.label}
  //             </ElTag>
  //           )
  //         })}
  //       </>
  //     )
  //   }
  // },
  {
    field: 'sortOrder',
    label: '显示排序'
  },
  {
    field: 'outside',
    label: '是否外链',
    slots: {
      default: (data) => {
        const value = data.outside
        return <>{['否', '是'][value]}</>
      }
    }
  },
  {
    field: 'proxy',
    label: '是否代理',
    slots: {
      default: (data) => {
        const value = data.outside
        return <>{['无', '重定向', '代理'][value]}</>
      }
    }
  },
  {
    field: 'redirectShow',
    label: '重定向显示'
  },
  {
    field: 'redirect',
    label: '重定向'
  },
  {
    field: 'routes',
    label: '路由参数'
  },
  {
    field: 'args',
    label: '参数转换'
  },
  {
    field: 'originRouteWay',
    label: '原路由地址'
  },
  {
    field: 'originRoutePath',
    label: '原组件地址'
  }
])
</script>

<template>
  <Descriptions :schema="detailSchema" :data="detailInfo || {}" />
</template>
